import type { ColumnDef } from "@tanstack/react-table";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import type { OrgWithMembers } from "@/queries/auth";
import { DeleteAlertDialog } from "./orgs-delete-dialog";
import { OrganizationFormDialog } from "./orgs-edit-dialog";

export const orgsTableColumns: ColumnDef<OrgWithMembers>[] = [
  {
    accessorKey: "name",
    header: "Name",
    size: 600,
    cell: ({ row }) => {
      return (
        <div className="flex items-center gap-2">
          <Avatar className="rounded-lg">
            <AvatarFallback className="rounded-lg font-bold">
              {row.original.name.charAt(0).toUpperCase()}
            </AvatarFallback>
          </Avatar>
          <div className="grid flex-1 text-left text-sm leading-tight">
            <span className="truncate">{row.original.name}</span>
            <span className="truncate text-xs opacity-50">{row.original.slug}</span>
          </div>
        </div>
      );
    },
  },
  {
    accessorKey: "members",
    header: () => <div className="text-right">Members</div>,
    size: 100,
    cell: ({ row }) => {
      const members = row.original.members;
      return <div className="text-right">{members.length}</div>;
    },
  },
  {
    id: "actions",
    size: 100,
    cell: ({ row }) => {
      return (
        <div className="flex items-center justify-end">
          <OrganizationFormDialog
            mode="edit"
            organization={{
              id: row.original.id,
              name: row.original.name,
              slug: row.original.slug as string,
            }}
          />
          <DeleteAlertDialog organizationId={row.original.id} />
        </div>
      );
    },
  },
];
